axios.defaults.baseURL='http://ajax-api.itheima.net'

const render = document.querySelector('.top');

axios({
  url:'/api/category/top',
  method:'GET'
}).then(({data:res})=>{
// console.log(res);
  const list=res.data.map(item=>{
    // console.log(item.id);
     return axios({
      url:'/api/category/sub?id='+item.id,
      method:'GET',
    })
  })
  return Promise.all(list)
}).then(res=>{
  const renderList =res.map(({data:{data:item}})=>{
    // console.log(item);
    return `<li>
    <a href="javascript:;">${item.name}</a>
    <img
      src="${item.picture}"
      alt=""
    />
    <ul class="sub">
      ${item.children.map(item=>{
        return `<li>
        <a href="javascript:;">
          <span>${item.name}</span>
          <img
            src="${item.picture}"
            alt=""
          />
        </a>
      </li>`
      }).join('')}
    </ul>
  </li>`
  }).join('')
  render.innerHTML=renderList
}
)
